<!--
 * @Author: zhi1hw hanwei@zhi1tech.com
 * @Date: 2024-06-18 10:32:15
 * @LastEditors: zhi1hw hanwei@zhi1tech.com
 * @LastEditTime: 2025-01-09 19:02:33
 * @FilePath: \code\src\views\home\components\assistant.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="assistant-container">

    <!-- 底部背景 -->
    <div class="bg">
      <div class="top-con" id="top-con">
      
        <div class="header">
          <div class="header-name">
            <img
              :src="require('@/assets/images/Vector.png')"
              style="width: 34px"
              alt=""
            />
            <!-- <span>至一AI助手</span> -->
            <van-swipe
              style="height: 30px"
              vertical
              :show-indicators="false"
              :autoplay="3000"
            >
              <van-swipe-item>
                <span class="weather"
                  >{{ moment().format("MM-DD") }} &nbsp;&nbsp;
                  {{ state.weekdays[moment().format("d")] }}</span
                >
              </van-swipe-item>
              <!-- <van-swipe-item>
                <span class="weather">
                
                  {{ state.homeInfo?.cityName || "" }} &nbsp;&nbsp;
                  <i :class="'qi-' + state.homeInfo?.currWeather?.icon"></i
                  >&nbsp;
                  <template v-if="state.homeInfo?.currWeather?.temp">
                    {{ state.homeInfo?.currWeather?.temp }}℃</template
                  >

                  &nbsp;&nbsp;&nbsp;{{
                    state.homeInfo?.currWeather?.text
                  }}</span
                >
              </van-swipe-item> -->
            </van-swipe>
          </div>

          <div>
            <!-- <img
              :src="
                state.checkedLang
                  ? require('@/assets/images/en.png')
                  : require('@/assets/images/zh.png')
              "
              style="width: 66px"
              alt=""
              srcset=""
              @click="changeLange"
            /> -->
            <img
              src="@/assets/images/new_converstaion.png"
              style="width: 23px;color: #000;margin-right: 5px;"
              alt=""
              srcset=""
              @click="isForbidden() ? '' : openNewWindow()"
            />

            <img
              src="@/assets/images/file-time.png"
              style="width: 23px;color: #000;"
              alt=""
              srcset=""
              @click="isForbidden() ? '' : openCharacterPopup()"
            />
          </div>
          
        </div>
        <div class="model-tab">
          <div
            class="default"
            :class="{ 'active deepactive': !state.modelType }"
            @click="modelChange(false)"
          >
            <span>对话</span>
          </div>
          <div
            class="deepseek"
            :class="{ 'active deepactive': state.modelType}"
            @click="modelChange(true)"
          >
          <div :class="{ 'pulse':  !state.modelType}">AI广场</div>
            
          </div>
        </div>
      </div>
    </div>
    
<!-- ai助手 -->
 <div v-if="!state.modelType"> 
     <!-- 列表部分 -->
     <div 
      class="content consultation-mode"
      :class="{
        'consultation-mode': state.showConsultation,
      }"
      :style="{
        paddingBottom: state.contentPadding + 40 + 'px',
      }"
      @scroll="handleScroll"
      ref="scrollContainer"
    >
      <!-- 问题提问 -->
      <div class="consultation-container">
        <div class="greet">
          <div class="ai-icon">
            <div class="">
              <span>{{
                state.checkedLang
                  ? language.messageEN.welcomeTop
                  : language.messageZH.welcomeTop
              }}</span>
              <span>{{
                state.checkedLang
                  ? language.messageEN.welcomeBtm
                  : language.messageZH.welcomeBtm
              }}</span>
            </div>
            <img class="avatar"       :src="require('@/assets/images/robot1.png')" width="52px" height="52px"
              alt="" />
          </div>
          <div class="con">
            <div
              class="con-text fs-28"
              v-html="
                state.checkedLang
                  ? language.messageEN.welcomeDsc
                  : language.messageZH.welcomeDsc
              "
            ></div>
          </div>
          <div class="module-type">
            <!-- <span :class="[state.moduleType === '咨询政策' ? 'active' : '']" @click="state.moduleType = '咨询政策'">咨询政策</span> -->
            <!-- <span :class="[state.moduleType === '咨询产品' ? 'active' : '']" @click="state.moduleType = '咨询产品'">咨询产品</span> -->
          </div>
        </div>
        <template v-for="(item, index) in state.consultationList" :key="index">
          <div class="item itema" v-if="item.type === 0">
            <div class="con" v-if="item.text">
              <div class="con-text fs-28" v-html="item.text"></div>
            </div>
            <div class="file-qa">
              <img v-for="(i, index) in item.fileList" :key="index" :src="i" />
            </div>
            <div class="file-doc">
              <div
                class="file_item"
                v-for="(i, index) in item.fileListDoc"
                :key="index"
              >
                <div class="upload-image-priview-box-doc">
                  <svg
                    t="1736394329026"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6140"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M847.488 1008.896H61.504V117.056h491.968l294.016 229.952z"
                      fill="#F0A221"
                      p-id="6141"
                    ></path>
                    <path
                      d="M956.48 901.888H170.496V10.048h556.032l230.016 226.176v665.664zM729.984 102.016v144h144l-144-144z m-104.96 81.984H286.016v57.984h339.008v-57.984z m216.96 164.992H284.992v57.984h556.992v-57.984z m0 169.984H284.992v57.984h556.992v-57.984z m0 165.056H284.992v57.984h556.992v-57.984z"
                      fill="#F1C84C"
                      p-id="6142"
                    ></path>
                  </svg>
                  <div class="file_de">
                    <div class="file_name">{{ i.file_name }}</div>
                    <div class="file_info">
                      <span class="file_type">{{ i.file_type }}</span>
                      <span class="file_size">{{ i.file_size }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item itema" v-if="item.type === 2">
            <div class="con">
              <div class="con-text fs-28">
                <!-- voice-loader-animate -->

                <div class="voice-loader">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="item itemb"
            v-if="item.type === 1 || item.type === 6 || item.questionType"
          >
            <div class="ai-icon" v-if="index !==state.consultationList.length-1">
              <img class="avatar" src="@/assets/images/robot1.png" />
              <span>{{
                state.checkedLang
                  ? language.messageEN.appTitle
                  : language.messageZH.appTitle
              }}</span>
            </div>

            <div class="con" v-if="index !==state.consultationList.length-1">
              <div
                class="con-text fs-28"
                v-html="item.answerContent"
                @click="handleClick($event)"
              ></div>
              <div
                class="con-file"
                :class="item.requestId"
                v-if="
                  state.printEnd &&
                  item.answerRaw &&
                  item.answerRaw?.docReferencesDistinct &&
                  item.answerRaw?.docReferencesDistinct.length > 0
                "
              >
                <van-collapse v-model="item.activeNames">
                  <van-collapse-item
                    :title="
                      state.checkedLang
                        ? language.messageEN.reference
                        : language.messageZH.reference
                    "
                    name="1"
                  >
                    <template #default>
                      <div
                        class="file-item fs-20"
                        :class="[citem.active ? 'active' : '']"
                        v-for="(citem, cindex) in item.answerRaw
                          .docReferencesDistinct"
                        :key="cindex"
                        @click="openFile(citem)"
                      >
                        <span class="iconfont icon-lianjie fs-24"></span>

                        {{ citem.docName || ""
                        }}<template
                          v-if="citem.indexId && citem.indexId.length > 0"
                        >
                          <template v-for="ditem in citem.indexId" :key="ditem">
                            [{{ ditem }}]
                          </template>
                        </template>
                      </div>
                    </template>
                  </van-collapse-item>
                </van-collapse>
              </div>
              <div
                class="con-file"
                v-if="
                  state.printEnd &&
                  item.classification &&
                  item.classification.length > 0
                "
              >
                <van-collapse v-model="item.activeNames1">
                  <van-collapse-item
                    :title="
                      state.checkedLang
                        ? language.messageEN.business
                        : language.messageZH.business
                    "
                    name="1"
                  >
                    <template #default>
                      <div
                        class="file-item fs-24"
                        v-for="(citem, cindex) in item.classification"
                        :key="cindex"
                      >
                        <div v-html="citem"></div>
                      </div>
                    </template>
                  </van-collapse-item>
                </van-collapse>
              </div>

              <div
                class="con-opt"
                v-if="!item.isError && !state.isDisabled && item.requestId"
              >
                <div class="left">
                  <img
                    src="@/assets/images/copy.png"
                    :data-clipboard-text="getPlainText(item.answerContent)"
                    class="copy-btn"
                    @click="handlerCopy(item.answerContent, item.requestId)"
                    alt=""
                  />
                  <img
                    src="@/assets/images/refresh.png"
                    alt=""
                    @click.stop="bindRefresh(item.questionContent, item)"
                  />
                  <img
                    src="@/assets/images/share.png"
                    @click="handleShare(item)"
                    alt=""
                  />
                </div>
                <!-- <div class="right">
                  <img
                    @click.stop="
                      handlerLike(item.requestId, item.feedBackType == 1 ? 0 : 1)
                    "
                    :src="
                      item.feedBackType == 1
                        ? require('@/assets/images/like-a.png')
                        : require('@/assets/images/like.png')
                    "
                    alt=""
                  />
                  <img
                    @click.stop="
                      showFeedBack(item.requestId, item.feedBackType == 2 ? 0 : 2, item.feedBackType)
                    "
                    :src="
                      item.feedBackType == 2
                        ? require('@/assets/images/cai-a.png')
                        : require('@/assets/images/cai.png')
                    "
                    alt=""
                  />
                </div> -->
              </div>
              <div class="rate" style="margin: 10px 0 0" v-if="item.isShowRate">
                <van-rate
                  :readonly="item.feedBackType == 99"
                  v-model="item.feedBackScore"
                  @change="(value) => onRateChange(value, item)"
                  :size="25"
                  color="rgba(251, 228, 62, 1)"
                  void-icon="star"
                  void-color="rgba(232, 234, 237, 1)"
                />
              </div>
              <div class="ratesure" v-if="item.isShowRateOpBox">
                <img
                  @click.stop="() => {
                    let data = state.consultationList
                    data.forEach((i: any, cindex:number) => {
                      if (i.requestId === item.requestId) {
                        i.feedBackType = state.cancleLikeStatus;
                        i.ratevalue = 0;
                        i.isShowRateOpBox = false;
                        i.feedBackScore = 0
                        // item.isShowRate = false;
                        if(cindex === data.length - 1) {
                          state.isShowLikePopover = false
                        }
                      }
                    });
                    state.consultationList = data
                  }
                  "
                  src="@/assets/images/error.png"
                  alt=""
                />
                <img
                  @click.stop="
                    showFeedBack(
                      item.requestId,
                      item.feedBackType == 2 ? 0 : 2,
                      item.feedBackType,
                      state.feedBackScore
                    )
                  "
                  src="@/assets/images/success.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </template>
        <!-- 打印动效专用的桥梁 -->
        <div class="item itemb print" v-if="!state.printEnd">
          <div class="ai-icon">
            <img class="avatar" src="@/assets/images/robot1.png" />
            <span>{{
              state.checkedLang
                ? language.messageEN.appTitle
                : language.messageZH.appTitle
            }}</span>
          </div>
          <div class="con">
            <div class="con-text fs-28" v-html="backHtm"></div>
          </div>
        </div>

        <!-- 加载动画 -->
        <div class="item itemb" v-if="state.isWait">
          <div class="ai-icon">
            <img class="avatar" src="@/assets/images/robot1.png" />
            <span>{{
              state.checkedLang
                ? language.messageEN.appTitle
                : language.messageZH.appTitle
            }}</span>
          </div>
          <div class="con loading-mask">
            <!-- <div id="loading">
              <div id="loading-center">
                <div id="loading-center-absolute">
                  <div class="object"></div>
                  <div class="object"></div>
                  <div class="object"></div>
                  <div class="object"></div>
                  <div class="object"></div>
                  <div class="object"></div>
                  <div class="object"></div>
                  <div class="object"></div>
                  <div class="object"></div>
                  <div class="object"></div>
                </div>
              </div>
            </div> -->
            <div class="load-15">
              <div class="k-loader k-circle"></div>
            </div>
            <!-- <div class="con-text fs-28 loading-text">
              <span style="--i: 1">正</span>
              <span style="--i: 2">在</span>
              <span style="--i: 3">思</span>
              <span style="--i: 4">考</span>
              <span style="--i: 5">.</span>
              <span style="--i: 6">.</span>
              <span style="--i: 7">.</span>
            </div> -->
          </div>
        </div>
      </div>
      <!--
      <div
        class="like-box"
        v-if="!state.isWait && state.printEnd && state.isShowLikePopover"
      >
        <div class="close" @click="state.isShowLikePopover = false">
          <van-icon name="cross" />
        </div>
        <p>满意请点赞👍，不足请反馈👎，助我成长，只为更好服务于您～</p>
        <div class="sanj"></div>
      </div>
-->
      <div
        class="guess-to-ask"
        v-if="state.guessList.length > 0 && state.printEnd && !state.isDisabled"
      >
        <span>{{
          state.checkedLang
            ? language.messageEN.iswant
            : language.messageZH.iswant
        }}</span>
        <div class="ask-list">
          <p
            @click="clickItemQa(item, 3)"
            v-for="(item, index) in state.guessList"
            :key="index"
          >
            {{ item }}
          </p>
        </div>
      </div>
    </div>
    <!-- 浮动机器人 -->

    <!-- 底部部分 -->
    <div class="assistant-footer" @click.stop>
      <div
        class="cxb-box"
        v-if="!state.isWait && state.printEnd && !state.inputFieldFocus"
      >
        <div class="cxb">
          <van-popover
            :show="state.isShowReco"
            placement="top-start"
            style="width: calc(100% - 30px); top: auto"
            :style="{
              bottom: state.floatBottom + 50 + 'px',
            }"
            class="reco-box"
            ref="popovercon"
            @close="state.isShowReco = false"
          >
            <div class="recommend-box">
              <div class="recommend">
                <div class="list">
                  <div class="desc fs-26">
                    <div class="robot">
                      <span class="dailyrecommendations"
                        >{{
                          state.checkedLang
                            ? language.messageEN.htoSearch
                            : language.messageZH.htoSearch
                        }}
                      </span>
                      <div class="shu"></div>
                      <span>
                        {{
                          state.checkedLang
                            ? language.messageEN.newContent
                            : language.messageZH.newContent
                        }}
                      </span>
                    </div>
                    <img
                      src="@/assets/images/close.png"
                      alt=""
                      style="width: 20px"
                      @click.stop="
                        (state.isPopverClose = false),
                          (state.isShowReco = !state.isShowReco)
                      "
                    />
                  </div>
                  <div class="nav-tab">
                    <div
                      class="nav-item"
                      :class="state.navIndex == i.dictValue ? 'active' : ''"
                      v-for="(i, index) in state.listTabItem"
                      :key="index"
                      @click="
                        (state.navIndex = i.dictValue), getQuizRecommend(1)
                      "
                    >
                      <div class="item-text" v-if="!state.checkedLang">
                        {{ i.dictLabel }}
                      </div>
                      <div class="item-text" v-if="state.checkedLang">
                        {{
                          i.dictValue == "0"
                            ? "Compliance"
                            : i.dictValue == "1"
                            ? "Finance"
                            : i.dictValue == "2"
                            ? "SFE"
                            : "System"
                        }}
                      </div>
                    </div>
                  </div>
                  <template v-if="state.list.length > 0">
                    <div
                      class="list-item"
                      v-for="(item, index) in state.list"
                      :key="index"
                      @click="
                        clickItemQa(
                          state.checkedLang
                            ? item.quizContentEN
                            : item.quizContent,
                          4
                        )
                      "
                    >
                      <span class="fs-24">
                        <b></b>
                        {{
                          state.checkedLang
                            ? item.quizContentEN
                            : item.quizContent
                        }}
                      </span>
                      <span class="arrow">
                        <span class="iconfont icon-jiantou fs-28"></span>
                      </span>
                    </div>
                  </template>
                  <template v-else>
                    <van-empty image-size="0">
                      <template #description
                        ><div style="color: rgba(255, 255, 255, 0.8)">
                          {{
                            state.checkedLang
                              ? language.messageEN.study
                              : language.messageZH.study
                          }}
                        </div></template
                      >
                    </van-empty>
                  </template>
                </div>
                <div
                  class="refresh"
                  v-if="state.list.length > 0"
                  @click="getQuizRecommend(1)"
                >
                  <span class="iconfont icon-shuaxin"></span>
                  {{
                    state.checkedLang
                      ? language.messageEN.changeBatch
                      : language.messageZH.changeBatch
                  }}
                </div>
              </div>
            </div>
            <template #reference>
              <div @click.stop="state.isShowReco = !state.isShowReco">
                <img src="@/assets/images/robot1.png" alt="" style="width: 30px; height: 30px; margin-left: 15px;margin-top: 5px;" />
                <div class="cxb-text" v-if="!state.isShowReco">
                  <img
                    :src="
                      state.checkedLang
                        ? require('@/assets/images/hotEN.png')
                        : require('@/assets/images/qipao.png')
                    "
                    alt=""
                  /><span class="hot-search">热搜</span>
                </div>
              </div>
            </template>
          </van-popover>
        </div>
      </div>
      <div class="cxb-box" v-else>
        <div class="cxb" v-if="!state.inputFieldFocus">
          <!-- <div class="loading-robat">
            <img src="@/assets/images/loading.gif" alt="" style="width: 70px" />
          </div> -->
        </div>
      </div>

      <!-- 操作区域 -->
      <div class="option-area">
        <div @click.stop="state.showArea = !state.showArea">
          <img src="@/assets/images/add.png" class="other-opt" alt="" />
        </div>
        <div class="input-box">
          <van-cell-group inset>
            <van-field
              v-model="state.sendText"
              @update:model-value="sendTextChange"
              :placeholder="
                state.checkedLang
                  ? language.messageEN.placeholder
                  : language.messageZH.placeholder
              "
              :type="'textarea'"
              :row="state.inputFieldFocus ? '4' : '1'"
              :autosize="{ maxHeight: 100 }"
              :disabled="state.isDisabled"
              @blur="getFooterHeight"
              @focus="state.inputFieldFocus = true"
              :class="!state.inputFieldFocus ? 'textareaellipsis' : ''"
              ref="input"
              v-if="!state.isShowVoiceInput"
            >
              <template #button>
                <span
                  v-if="
                    state.sendText ||
                    state.sendHidenText ||
                    (state.fileList && state.fileList.length > 0)
                  "
                >
                  <img
                    class="other-yuyin 1"
                    v-if="state.isDisabled"
                    src="@/assets/images/stop.png"
                    alt=""
                    @click="stopReceiveData(3)"
                  />
                  <img
                    class="other-yuyin 2"
                    v-if="!state.isDisabled"
                    src="@/assets/images/send.png"
                    alt=""
                    @click="sendQa"
                  />
                </span>
                <span v-else>
                  <img
                    class="other-yuyin 3"
                    src="@/assets/images/record-icon.png"
                    alt=""
                    v-if="!state.isDisabled"
                    @click="setVoiceInput()"
                  />
                  <img
                    class="other-yuyin 4"
                    src="@/assets/images/record-icon.png"
                    alt=""
                    v-else
                  />
                </span>
              </template>
            </van-field>
            <!--     @bindChangeKeyword="bindChangeKeyword" -->
            <div v-else>
              <soundRecording
                @addVoiceItem="addVoiceItem"
                @bindChangeKeyword="bindChangeKeyword"
                :stateSound="state.checkedLang"
                ref="soundRecordingRef"
                v-if="state.isComWx"
              />
              <soundRecordingComWx
                @addVoiceItem="addVoiceItem"
                @bindChangeKeyword="bindChangeKeyword"
                :stateSound="state.checkedLang"
                :stream="state.stream"
                v-else
                ref="soundRecordingRef"
              ></soundRecordingComWx>
            </div>
          </van-cell-group>
        </div>
      </div>
      <!-- 上传图预览区域 -->
      <div
        class="upload-image-priview"
        v-if="
          state.isShowImageList && state.fileList && state.fileList.length > 0
        "
      >
        <div
          class="upload-image-priview-box"
          v-for="(item, index) in state.fileList"
          :key="index"
        >
          <div class="upload-image-priview-box-close">
            <img
              src="@/assets/images/close.png"
              alt=""
              @click="
                () => {
                  state.fileList.splice(index, 1);
                }
              "
              style="width: 20px"
            />
          </div>
          <div class="upload-image-priview-box-img">
            <img :src="item" alt="" />
          </div>
        </div>
      </div>
      <!-- 上传文件区域 -->
      <div
        class="upload-image-priview"
        v-if="
          state.isShowDocList &&
          state.fileListDoc &&
          state.fileListDoc.length > 0
        "
      >
        <div
          class="upload-image-priview-box upload-doc-priview-box"
          v-for="(item, index) in state.fileListDoc"
          :key="index"
        >
          <div
            class="upload-image-priview-box-close"
            @click="
              () => {
                state.fileListDoc.splice(index, 1);
              }
            "
          >
            <van-icon name="close" />
          </div>
          <div class="upload-image-priview-box-doc">
            <svg
              t="1736394329026"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6140"
              width="32"
              height="32"
            >
              <path
                d="M847.488 1008.896H61.504V117.056h491.968l294.016 229.952z"
                fill="#F0A221"
                p-id="6141"
              ></path>
              <path
                d="M956.48 901.888H170.496V10.048h556.032l230.016 226.176v665.664zM729.984 102.016v144h144l-144-144z m-104.96 81.984H286.016v57.984h339.008v-57.984z m216.96 164.992H284.992v57.984h556.992v-57.984z m0 169.984H284.992v57.984h556.992v-57.984z m0 165.056H284.992v57.984h556.992v-57.984z"
                fill="#F1C84C"
                p-id="6142"
              ></path>
            </svg>
            <div class="file_de">
              <div class="file_name">{{ item.file_name }}</div>
              <div class="file_info">
                <span class="file_type">{{ item.file_type }}</span>
                <span class="file_size">{{ item.file_size }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 选择区域 -->
      <div class="area-con" v-if="state.showArea">
        <van-row gutter="20">
          <van-col span="4">
            <van-uploader max-count="1" :after-read="afterRead">
              <div class="area-item">
                <img src="@/assets/images/opt-1.png" />
                <span>{{
                  state.checkedLang
                    ? language.messageEN.image
                    : language.messageZH.image
                }}</span>
              </div>
            </van-uploader>
          </van-col>
          <van-col span="4">
            <van-uploader
              max-count="99"
              multiple
              accept="*/*"
              :after-read="afterReadFile"
            >
              <div class="area-item" @click="bindOptClick">
                <img src="@/assets/images/opt-2.png" />
                <span>{{
                  state.checkedLang
                    ? language.messageEN.document
                    : language.messageZH.document
                }}</span>
              </div>
            </van-uploader>
          </van-col>
          <van-col span="4">
            <div class="area-item" @click="state.isShowSoundRecording = true">
              <img src="@/assets/images/opt-3.png" />
              <span>{{
                state.checkedLang
                  ? language.messageEN.voice
                  : language.messageZH.voice
              }}</span>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="ver">{{ ver }}</div>
    </div>

    <!-- 个人信息 - popup-->
    <character-popup
      @listenLink="setOldSession"
      :selectOldWin="'234'"
      :state="state.checkedLang"
      ref="characterPopupRef"
    />
 </div>
 <!-- ai广场 -->
 <div  v-else> 
<aiSquare  @handTabChange="handTabChange" ></aiSquare>
 </div>

    <van-popup
      v-model:show="state.showFeedBack"
      :close-on-click-overlay="false"
      closeable
      round
      :style="{ padding: '12px' }"
    >
      <!--       @click-close-icon="onClickCloseIcon"
 -->
      <div class="feedback-box">
        <div class="title">
          <div class="title-left">
            {{
              state.checkedLang
                ? language.messageEN.feed
                : language.messageZH.feed
            }}
          </div>
        </div>
        <div class="feedback-content">
          <van-checkbox-group
            v-model="state.feedBackChecked"
            checked-color="#5CB2FF"
            direction="horizontal"
            ref="checkboxGroup"
          >
            <van-checkbox
              :name="i.dictLabel"
              v-for="i in state.feedBackSelect"
              :key="i.dictCode"
              >{{ i.dictLabel }}</van-checkbox
            >
          </van-checkbox-group>
          <van-field
            v-model="state.feedBackText"
            type="textarea"
            class="feedback-textarea"
            :placeholder="
              state.checkedLang
                ? language.messageEN.feedContent
                : language.messageZH.feedContent
            "
            :row="4"
          />
          <div class="feedback-back">
            <van-button
              size="small"
              type="primary"
              @click="handlerCancleLike"
              >{{
                state.checkedLang
                  ? language.messageEN.submit
                  : language.messageZH.submit
              }}</van-button
            >
          </div>
        </div>
      </div>
    </van-popup>
    <van-share-sheet
      v-model:show="state.showShare"
      :options="options"
      @select="(e) => toShare(e)"
    />
    <van-overlay
      :show="state.isShowSharingGuidance"
      @click="state.isShowSharingGuidance = false"
      z-index="102"
    >
      <img
        src="@/assets/images/SharingGuidance.png"
        alt=""
        style="width: 70%; padding: 0 16px; float: right"
      />
    </van-overlay>
  </div>
</template>

<script setup lang="ts">
import {
  ComponentInternalInstance,
  getCurrentInstance,
  inject,
  onMounted,
  onUnmounted,
  reactive,
  watch,
  defineProps,
  ref,
  onUpdated,
  computed,
} from "vue";
import VoiceAnnouncementsInstance from "@/utils/VoiceAnnouncements";
import characterPopup from "./characterPopup.vue";
import soundRecording from "../../common/soundRecording.vue";
import moment from "moment";
import Clipboard from "clipboard";
import { areaList } from "@vant/area-data";
import { marked } from "marked";
import { showToast } from "vant";
import language from "@/lang/zh";
import { fetchEventSource } from "@microsoft/fetch-event-source";
import soundRecordingComWx from "../../common/soundRecordingComWx.vue";
import aiSquare from './aiSquare.vue'
import { showDialog } from "vant";

// import { useI18n } from 'vue-i18n';
// const { t } =useI18n()

// 获取当前主题
const themeColor: any = inject("themeColor");
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface IState {
  list: Array<any>;
  showArea: boolean;
  sendText: string;
  showConsultation: boolean;
  contentPadding: number;
  printBackHtml: string;
  backHtml: string;
  consultationList: Array<any>;
  printEnd: boolean;
  printAllHtml: any;
  isDisabled: boolean;
  isWait: boolean;
  messages: any;
  sendHidenText: string;
  userScrolled: boolean;
  userInfo: any;
  sessionId?: string;
  isShowReco?: boolean;
  abortController?: any;
  isNewWindow?: boolean;
  showPopover?: boolean;
  isPrintNow?: boolean;
  eventSource?: any;
  quizClassification?: any;
  currentIndex: number;
  answerObj?: null;
  moduleType?: string;
  isPopverClose?: boolean;
  activeNames?: any;
  activeNames1?: any;
  homeInfo?: any;
  floatBottom?: number;
  isSoundRecording?: boolean;
  classiFicationData?: any;
  guessList: any;
  inputFieldFocus?: boolean;
  isShowSoundRecording?: boolean;
  feedBackSelect?: any;
  showFeedBack: boolean;
  isShowVoiceInput: boolean;
  feedBackChecked?: Array<string>;
  feedBackText?: any;
  cancleLikeID?: any;
  cancleLikeStatus?: any;
  showShare?: boolean;
  shareItem?: any;
  actionStop?: boolean;
  isYouKnown?: boolean;
  questionType?: number;
  isShowSharingGuidance?: boolean;
  isShowLikePopover?: boolean;
  listTabItem?: any;
  navIndex?: number;
  feedBackScore?: number;
  checkedLang?: boolean;
  weekdays?: any;
  fileList: string[];
  fileListDoc: any;
  controller?: any;
  isShowImageList: boolean;
  isShowDocList: boolean;
  isComWx?: boolean;
  stream?: object;
}

const state: IState = reactive({
  navIndex: 0,
  listTabItem: [],
  isShowSharingGuidance: false,
  isShowLikePopover: false,
  isYouKnown: false,
  questionType: 1,
  shareItem: null,
  showShare: false,
  cancleLikeID: null,
  cancleLikeStatus: null,
  feedBackChecked: [],
  feedBackText: "",
  isShowVoiceInput: false,
  showFeedBack: false,
  feedBackSelect: [],
  inputFieldFocus: false,
  isShowSoundRecording: false,
  guessList: [],
  moduleType: "咨询政策",
  floatBottom: 0,
  activeNames: [""],
  activeNames1: ["1"],
  currentIndex: 0,
  sendText: "",
  classiFicationData: "",
  showArea: false, // 是否显示选择区域
  isPopverClose: true, // 是否可以关闭至一热搜
  isShowReco: false,
  isNewWindow: false,
  showPopover: true,
  isPrintNow: false,
  list: [],
  userInfo: null,
  eventSource: null,
  quizClassification: null,
  showConsultation: false,
  contentPadding: 0,
  consultationList: [],
  printEnd: true,
  printBackHtml: "",
  printAllHtml: "",
  isDisabled: false,
  backHtml: ``,
  isWait: false,
  messages: [],
  sendHidenText: "",
  userScrolled: false,
  abortController: new AbortController(),
  answerObj: null,
  homeInfo: null,
  isSoundRecording: false,
  actionStop: false,
  feedBackScore: 0,
  checkedLang: false,
  weekdays: [],
  fileList: [],
  fileListDoc: [],
  controller: null,
  isShowImageList: false,
  isShowDocList: false,
  isComWx: false,
  stream: {},
  deepsShow:false,
modelType:false,
});
// const checkedLang = ref(false)
const ver = process.env.VUE_APP_VERSION;
const scrollContainer = ref<any>(null);
const characterPopupRef = ref<any>(null);
const input = ref<any>(null);
const popovercon = ref<any>(null);
const checked = ref([]);
const checkboxGroup = ref(null);
const soundRecordingRef = ref<any>(null);
state.weekdays = state.checkedLang
  ? [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
    ]
  : ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
const options = [
  { name: "微信", icon: "wechat", type: 2 },
  { name: "企业微信", icon: require("../../../assets/images/qi.png"), type: 1 },
];
const isPCFun = () => {
  var isMobile = navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  ); // 是否移动端
  var isWx = /micromessenger/i.test(navigator.userAgent); // 是否微信
  var isComWx = /wxwork/i.test(navigator.userAgent); // 是否企业微信
  // let platform = '';
  // if (isComWx && isMobile) {
  //     platform = '移动端企业微信';
  // } else if (isComWx && !isMobile) {
  //     platform = 'PC端企业微信';
  // } else if (isWx && isMobile) {
  //     platform = '移动端微信';
  // } else if (isWx && !isMobile) {
  //     platform = 'PC端微信';
  // }
  // alert(isComWx ? '企业微信' : '非企业微信')
  return isComWx;
};
// 回答问题时禁止点击
const isForbidden = () => {
  if (state.isDisabled) {
    proxy?.$showToast(
      state.checkedLang
        ? "Please wait for the answer to be completed"
        : "请等待答案完成"
    );
    return true;
  } else {
    return false;
  }
};

// 图片上传
const afterRead = (file: any) => {
  state.fileListDoc = [];
  state.isShowDocList = false;
  const url = process.env.VUE_APP_BASE_API_URL + "/wechatApi/fileUpload";
  const formData = new FormData();
  formData.append("file", file.file);
  proxy?.$api
    .post(url, formData, {
      Headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((res: any) => {
      if (res.code === 200) {
        state.fileList = [res.fileUrl];
        state.isShowImageList = true;
      }
    });
};
// 文件上传
const afterReadFile = (file: any) => {
  state.fileList = [];
  state.isShowImageList = false;
  const url = process.env.VUE_APP_BASE_API_URL + "/wechatApi/getAliFileId";
  const formData = new FormData();
  if(file.length > 0) {
    file.forEach((item: any) => {
      formData.append("files", item.file);
    });
  } else {
    formData.append("files", file.file);
  }
  
  proxy?.$api
    .post(url, formData, {
      Headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((res: any) => {
      if (res.code === 200) {
        state.fileListDoc = res.data.map((i: any) => {
          const parts = i.file_name.split(".");
          return {
            ...i,
            file_size: sizeFileZh(Number(i.file_size)),
            file_type:
              parts.length > 1 ? parts[parts.length - 1].toLowerCase() : "",
          };
        });
        state.isShowDocList = true;
      }
    });
};
const onClickCloseIcon = () => {
  state.feedBackScore = 0;
  let data = state.consultationList;
  data.forEach((i: any) => {
    if (i.requestId === state.cancleLikeID) {
      i.ratevalue = 0;
    }
  });
  state.consultationList = data;
};
const onRateChange = (value: any, item: any) => {
  state.feedBackScore = value;
  let data = state.consultationList;
  data.forEach((i: any, cindex: number) => {
    if (i.requestId === item.requestId) {
      i.isShowRateOpBox = true;
    }
  });
  state.consultationList = data;
};

const getPlainText = (htmlContent: string) => {
  // 创建一个新的DOM解析器
  var parser = new DOMParser();
  // 使用解析器解析HTML内容，并获取文档对象
  var doc = parser.parseFromString(htmlContent, "text/html");
  // 创建一个文本节点的范围
  var range = doc.createRange();
  // 选择文档中的所有节点
  range.selectNodeContents(doc.body);
  // 使用范围提取文本内容
  return range.toString();
};
const handleClick = (event: any) => {
  const target = event.target;
  if (target.matches(".phone-tips")) {
    let list = state.consultationList;
    list.forEach((item: any) => {
      if (item.requestId && item.requestId === target.getAttribute("data-id")) {
        item.activeNames1 = ["1"];
      }
    });
    state.consultationList = list;
  }
  if (target.matches(".doc-tips")) {
    const position = target.getAttribute("data-position");
    if (position) {
      scrollToPosition(position);
    }
  }
};
const scrollToPosition = (position: any) => {
  let attr = position.split("%");
  let indexs = attr[1].replace(/\[|\]/g, "");
  const element = document.getElementsByClassName(`${attr[0]}`);
  let list = state.consultationList;
  for (let i = 0; i < list.length; i++) {
    if (
      list[i].questionType &&
      list[i].questionType === 1 &&
      list[i].requestId == attr[0]
    ) {
      list[i].activeNames = ["1"];
      if (
        list[i].answerRaw &&
        list[i].answerRaw.docReferencesDistinct?.length > 0
      ) {
        list[i].answerRaw.docReferencesDistinct.forEach((j: any) => {
          if (hasCommonCharacters(indexs, j.indexId.toString())) {
            j.active = true;
          } else {
            j.active = false;
          }
        });
      }
    } else if (list[i].questionType && list[i].questionType === 1) {
      list[i].activeNames = [];
      if (
        list[i].answerRaw &&
        list[i].answerRaw.docReferencesDistinct?.length > 0
      ) {
        list[i].answerRaw.docReferencesDistinct.forEach((j: any) => {
          j.active = false;
        });
      }
    }
  }
  if (scrollContainer && scrollContainer.value) {
    scrollContainer.value.scrollTop =
      element[0].offsetTop + scrollContainer.value.scrollTop;
  }
};
const sendQa = () => {
  if (!state.sendHidenText) {
    state.sendHidenText = state.sendText;
  }
  const sendText =
    JSON.parse(JSON.stringify(state.sendText)) ||
    JSON.parse(JSON.stringify(state.sendHidenText));
  if (!sendText) {
    proxy?.$showToast("发送内容不能为空");
    return false;
  }
  state.isYouKnown = true;
  if (state.questionType !== 6 && state.fileList.length > 0) {
    state.questionType = 6;
    state.isNewWindow = true;
    input.value.focus();
    state.consultationList = [];
    state.guessList = [];
    state.sessionId = "";
    state.isShowLikePopover = false;
    window.scrollTo(0, document.body.scrollHeight);
  } else if (state.questionType === 6 && state.fileList.length >= 0) {
    state.isShowImageList = false;
    state.questionType = 6;
  }
  if (state.questionType !== 7 && state.fileListDoc.length > 0) {
    state.questionType = 7;
    state.isNewWindow = true;
    input.value.focus();
    state.consultationList = [];
    state.guessList = [];
    state.sessionId = "";
    state.isShowLikePopover = false;
    window.scrollTo(0, document.body.scrollHeight);
  } else if (state.questionType === 7 && state.fileListDoc.length >= 0) {
    state.isShowImageList = false;
    state.questionType = 7;
  }

  initSSE();
};
const hasCommonCharacters = (str1: string, str2: string) => {
  // 将字符串转换成集合（Set），假设字符串以逗号分隔
  const set2 = new Set(str2.split(","));

  // 遍历第二个集合，检查是否存在相同的字符
  for (let char of set2) {
    if (str1.includes(char)) {
      return true;
    }
  }

  return false;
};
const openFile = (e: any) => {
  // let sizes = proxy?.$utils.getFileSize(e.filePath);
  if (e.filePath) {
    location.href = e.filePath;
  } else {
    proxy?.$showToast("暂无此源文档相关路径");
  }

  //   wx.previewFile({
  //     url: e.filePath,
  //     name: '',
  //     size: sizes
  // });
  //
};
const addVoiceItem = (e: any) => {
  state.sendText = e.text;
  state.sendHidenText = e.text;
  state.isShowSoundRecording = false;
  state.isShowVoiceInput = false;
  state.isYouKnown = true;
  state.questionType = 2;
  initSSE();
};
const bindChangeKeyword = () => {
  state.isShowVoiceInput = false;
};
const getHomeInfo = () => {
  let area = localStorage.getItem("area")
    ? JSON.parse(localStorage.getItem("area"))
    : "";
  proxy?.$api
    .get(process.env.VUE_APP_BASE_API_URL + "/wechatApi/getHomeInfo", {
      cityName: area
        ? area.selectedOptions[area.selectedOptions.length - 1].text
        : "上海",
    })
    .then((res: any) => {
      if (res.code === 200) {
        if (area) {
          res.data.cityName =
            area.selectedOptions[area.selectedOptions.length - 1].text;
        }
        localStorage.setItem("homeInfo", JSON.stringify(res.data));
        state.homeInfo = res.data;
      }
    })
};
const setOldSession = (e: any) => {
  state.guessList = [];
  state.isShowLikePopover = false;
  state.sessionId = e.id;
  let list = JSON.parse(JSON.stringify(e.list));
  let classification: any = [];
  for (let j = 0; j < list.length; j++) {
    let i = list[j];
    if (i.type === 1 || i.questionType) {
      let arr = i.classContent?.split("|") || [];
      for (let j = 0; j < arr.length; j++) {
        arr[j] = arr[j].replace(
          /\ball\b/g,
          state.checkedLang
            ? language.messageEN.contacts
            : language.messageZH.contacts
        );
        if (i && i.status === 0 && arr[j].includes("业务领域")) {
          let typeText = arr[j].split(":")[1];
          i.answerContent = i.answerContent.replace(
            /<<类型>>|&lt;&lt;类型&gt;&gt;/g,
            `<span class="phone-tips" data-id=${i.requestId} style="color: #5CB2FF">${typeText}</span>`
          );
        }
        arr[j] = proxy?.$utils.phoneReg(arr[j], arr[j].requestId);
        let seconed = marked(arr[j]);
        arr[j] = seconed;
      }
      classification = arr;
      let html = i.answerContent;
      html = proxy?.$utils.phoneReg(html, i.requestId) || html;
      if (classification.length > 0) {
        const regex1 = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
        i.classification = classification;
      }
      i.answerContent = marked(html);
      i.answerRaw = i.answerRaw ? JSON.parse(i.answerRaw) : null;
      i.printEnd = true;
      i.activeNames = [];
      i.activeNames1 = i.status === 0 ? ["1"] : [];
      i.isShowRate = i.feedBackType == 99;
      // i.isShowRate = false;
      i.isShowRateOpBox = false;
    }
  }
  console.log(e.list,'list');
  state.consultationList = list;
  state.questionType = list[list.length - 1].questionType;
  window.scrollTo(0, document.body.scrollHeight);
};
const props = defineProps({
  selectOldWin: {
    type: String,
    default: "",
  },
  bot_id:{
    
    type:String,
		default:'app-q1WQIYFgyDI4yjbeV2h6PYMi'
  },
  isTolk:{
    type: Boolean,
    default: true,
  }
});
const setFieldFocus = () => {
  state.inputFieldFocus = true;
  input.value.focus();
};
const openNewWindow = async (type = 1) => {
  await   createSession()
  state.isNewWindow = true;
  // input.value.focus();
  state.printEnd =true
  state.consultationList = [];
  state.guessList = [];
  state.sessionId = "";
  state.isShowLikePopover = false;
  state.questionType = type;

  window.scrollTo(0, document.body.scrollHeight);
  stopReceiveData(2);
  proxy?.$showToast(
    state.checkedLang ? language.messageEN.newTalk : language.messageZH.newTalk
  );
};
const changeLange = () => {
  state.checkedLang = !state.checkedLang;
  getFeedBackSelect();
};
// 重新进行问答
const bindRefresh = (e: string, item: any) => {
  state.sendHidenText = e;
  if (state.questionType === 6 && item.resourceFile) {
    state.fileList = [item.resourceFile];
  }
  if (state.questionType === 7 && item.resourceFile) {
    state.fileListDoc = item.resourceFile;
  }
  initSSE();
};
// 停止接收数据
const stopReceiveData = (type: number) => {
  state.actionStop = true;
  stopStream(type);
};
// 启动个人信息的Popup
const openCharacterPopup = () => {
  characterPopupRef.value.active();
};

// const startTextToSpeech = (str: string, index: number) => {
//   const list = JSON.parse(JSON.stringify(state.consultationList));
//   list.forEach((i: any, n: number) => {
//     if (n === index) {
//       if (!i.isSpeech) {
//         VoiceAnnouncementsInstance.startVoiceFunction(str);
//       } else {
//         VoiceAnnouncementsInstance.stopVoiceFunction(str);
//       }
//     } else {
//       VoiceAnnouncementsInstance.stopVoiceFunction(str);
//     }
//   });
//   state.consultationList = list;
// };
const bindOptClick = () => {
  proxy?.$showToast("功能模块建设中");
};
// 定义事件处理函数
const handleDocumentClick = (event: any) => {
  // 在这里执行你需要的操作
  hideFooterArea();
};

const hideFooterArea = () => {
  state.showArea = false;
};
const sendTextChange = () => {
  // 检查提问问题输入框是否有值
  // state.showArea = state.sendText ? true : false;
  state.showArea = false;
};
// 点击热门问答
const clickItemQa = (e: string, type: number) => {
  if (state.questionType == 6) {
    openNewWindow();
  }
  state.isPopverClose = false;
  state.isYouKnown = type !== 3;
  state.questionType = type;
  window.scrollTo(0, document.body.scrollHeight);
  e;
  if (!state.isDisabled) {
    state.sendHidenText = e;
    initSSE();
  }
};
// 获取推荐问题
const getQuizRecommend = (type: number) => {
  if (type) {
    state.isPopverClose = false;
  }
  if (!state.navIndex) {
    proxy?.$api
      .get(
        process.env.VUE_APP_BASE_API_URL + "/wechatApi/dict/quiz_recommend_type"
      )
      .then((res: any) => {
        if (res.code === 200) {
          state.listTabItem = res.data;
          state.navIndex = res.data[0].dictValue;
        }
      });
  }
  proxy?.$api
    .get(process.env.VUE_APP_BASE_API_URL + "/wechatApi/getQuizRecommend", {
      type: state.navIndex,
      // lang: state.checkedLang?'en':'zh'
    })
    .then((res: any) => {
      if (res.code === 200) {
        state.list = res.data;
      }
    });
};
// 分享
const handleShare = (item: any) => {
  state.shareItem = item;
  if (localStorage.getItem("env") === "wxwork") {
    state.showShare = true;
  } else {
    toShare({ type: 3 });
  }
};
const toShare = (e: any) => {
  let url = location.href.split("#")[0];
  let userInfo = localStorage.getItem("userInfo")
    ? JSON.parse(localStorage.getItem("userInfo"))
    : null;
  let mail = userInfo ? userInfo.user?.email.split("@")[0] : "";
  const env = localStorage.getItem("env");
  if (env === "wxwork") {
    wx.invoke(
      e.type === 1 ? "shareAppMessage" : "shareWechatMessage",
      {
        title: state.shareItem.questionContent, // 分享标题
        desc: state.shareItem.answerContent
          .replace(/<[^<>]+>/g, "")
          .replace(/&nbsp;/gi, ""), // 分享描述
        link:
          url +
          "#/preview?requestId=" +
          state.shareItem.requestId +
          "&email=" +
          mail, // 分享链接
        imgUrl: require("@/assets/images/robot1.png"), // 分享封面
      },
      function (res: any) {
        state.shareItem = null;
        state.showShare = false;
      }
    );
  } else if (env === "micromessenger") {
    wx.updateAppMessageShareData({
      title: state.shareItem.questionContent, // 分享标题
      desc: state.shareItem.answerContent
        .replace(/<[^<>]+>/g, "")
        .replace(/&nbsp;/gi, ""), // 分享描述
      link:
        url +
        "#/preview?requestId=" +
        state.shareItem.requestId +
        "&email=" +
        mail, // 分享链接
      imgUrl: require("@/assets/images/robot1.png"), // 分享封面
      success: function () {
        state.isShowSharingGuidance = true;
        // 设置成功
      },
    });
    wx.updateTimelineShareData({
      title: state.shareItem.questionContent, // 分享标题
      link:
        url +
        "#/preview?requestId=" +
        state.shareItem.requestId +
        "&email=" +
        mail, // 分享链接
      imgUrl: require("@/assets/images/robot1.png"), // 分享封面
      success: function () {
        state.isShowSharingGuidance = true;
      },
    });
  }
};



const bot_id = ref(props.bot_id)

const handTabChange =async (e)=>{
  bot_id.value = e.bot_id
  state.modelType =false

  state.consultationList = [];
  state.printEnd = true
  await createSession(true)

}

// 点赞
const handlerLike = (id: string, status: number) => {
  let data = JSON.parse(JSON.stringify(state.consultationList));
  proxy?.$api
    .post(process.env.VUE_APP_BASE_API_URL + "/wechatApi/updateQARecord", {
      requestId: id,
      feedBackType: status,
      feedBackComment: null,
      feedBackDetail: null,
    })
    .then((res: any) => {
      if (res.code === 200) {
        data.forEach((i: any) => {
          // if (i.feedBackType == 2 && i.feedBackType != 1) {
          //   i.feedBackType = 0;
          // }

          if (i.requestId === id) {
            i.feedBackType = status;
          }
        });
        state.consultationList = data;
      }
    });
};
const showFeedBack = (id: string, status: number, type: any, value: any) => {
  if (value) {
    state.cancleLikeID = id;

    if (value <= 3) {
      state.feedBackScore = value;
      state.showFeedBack = true;
    } else {
      state.feedBackScore = value;
      state.cancleLikeID = id;
      state.cancleLikeStatus = status;
      state.feedBackChecked = [];
      state.feedBackText = "";
      handlerCancleLike();
    }
  } else {
    proxy?.$showToast(
      state.checkedLang
        ? language.messageEN.assisant
        : language.messageZH.assisant
    );
  }

  // if(type != 2) {
  //   state.cancleLikeID = id;
  //   state.cancleLikeStatus = status;
  //   state.feedBackChecked = [];
  //   state.feedBackText = [];
  //   state.showFeedBack = true;
  // } else {
  //   state.cancleLikeID = id;
  //   state.cancleLikeStatus = 0;
  //   state.showFeedBack = false;
  //   handlerCancleLike()
  // }
};
// 取消点赞
const handlerCancleLike = () => {
  let data = JSON.parse(JSON.stringify(state.consultationList));
  proxy?.$api
    .post(process.env.VUE_APP_BASE_API_URL + "/wechatApi/updateQARecord", {
      requestId: state.cancleLikeID,
      // feedBackType: state.cancleLikeStatus,
      feedBackType: 99,
      feedBackComment: state.feedBackChecked?.toString(),
      feedBackDetail: state.feedBackText || "",
      feedBackScore: state.feedBackScore,
    })
    .then((res: any) => {
      if (res.code === 200) {
        data.forEach((i: any) => {
          if (i.requestId === state.cancleLikeID) {
            i.feedBackType = 99;
            // i.isShowRate = false;
            i.isShowRateOpBox = false;
          }
        });
        state.showFeedBack = false;
        state.cancleLikeID = null;
        state.cancleLikeStatus = null;
        state.feedBackScore = 0;
        state.consultationList = data;
        state.isShowLikePopover = false;
        proxy?.$showToast(
          state.checkedLang
            ? language.messageEN.thank
            : language.messageZH.thank
        );
      }
    });
};

// 复制
const handlerCopy = (str: string, id: string) => {
  let dom = document.getElementsByClassName(id);

  let clipboard = new Clipboard(".copy-btn");
  clipboard.on("success", (e) => {
    proxy?.$showToast(
      state.checkedLang
        ? language.messageEN.clipboard
        : language.messageZH.clipboard
    );
    clipboard.destroy();
  });

  // navigator.clipboard.writeText(str).then(
  //   function () {
  //     proxy?.$showToast("成功复制到剪贴板");
  //   },
  //   function (err) {
  //     proxy?.$showToast("无法复制到剪贴板：");
  //   }
  // );
};

// 获取底部高度
const getFooterHeight = () => {
  // 在 Vue 组件中
  state.inputFieldFocus = false;
  setTimeout(() => {
    const footerHeight =
      document.querySelector(".assistant-footer")?.clientHeight;
    state.floatBottom = footerHeight;
    return footerHeight || 54;
  }, 0);
};

// 滚动到最底部
const scrollToBottom = () => {
  if (scrollContainer && scrollContainer.value) {
    scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
  }
};

// 监听是否使用户手动滚动
const handleScroll = () => {
  // 当用户滚动到顶部一定距离以上时，认为是用户手动滚动
  if (scrollContainer && scrollContainer.value) {
    if (
      scrollContainer.value.scrollTop + scrollContainer.value.clientHeight <
      scrollContainer.value.scrollHeight - 10
    ) {
      state.userScrolled = true;
    } else {
      state.userScrolled = false;
    }
  }
};

onUpdated(() => {
  if (!state.userScrolled) {
    scrollToBottom();
  }
});
// 监听底部区域显示
watch(
  () => state.showArea,
  () => {
    proxy?.$nextTick(() => {
      // 获取底部高度 并且设置内容区域距离底部的内边距
      state.contentPadding = getFooterHeight();
    });
  },
  {
    immediate: true,
    deep: true,
  }
);
const sizeFileZh = (fileSize: number) => {
  var size = "";
  if (fileSize < 0.1 * 1024) {
    //如果小于0.1KB转化成B
    size = fileSize.toFixed(2) + "B";
  } else if (fileSize < 0.1 * 1024 * 1024) {
    //如果小于0.1MB转化成KB
    size = (fileSize / 1024).toFixed(2) + "KB";
  } else if (fileSize < 0.1 * 1024 * 1024 * 1024) {
    //如果小于0.1GB转化成MB
    size = (fileSize / (1024 * 1024)).toFixed(2) + "MB";
  } else {
    //其他转化成GB
    size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + "GB";
  }

  var sizestr = size + "";
  var len = sizestr.indexOf(".");
  var dec = sizestr.substr(len + 1, 2);
  if (dec == "00") {
    //当小数点后为00时 去掉小数部分
    return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
  }
  return sizestr;
};

const setVoiceInput = async () => {
  if (state.isComWx) {
    state.isShowVoiceInput = true;
  } else {
    if (navigator.permissions) {
      navigator.permissions
        .query({ name: "microphone" })
        .then(async function (permissionStatus) {
          // 状态值可以是 "granted"（已授权）、"denied"（已拒绝）或 "prompt"（未决定）
          if (permissionStatus.state === "granted") {
            const stream = await navigator.mediaDevices.getUserMedia({
              audio: true,
            });

            state.stream = stream;
            state.isShowVoiceInput = true;
          } else if (permissionStatus.state === "denied") {
            showDialog({ message: "已拒绝语音授权" });
            console.log("User has denied microphone access.");
          } else if (permissionStatus.state === "prompt") {
            const stream = await navigator.mediaDevices.getUserMedia({
              audio: true,
            });
          }

          // 监听权限状态变化
          permissionStatus.onchange = async function () {
            if (permissionStatus.state === "granted") {
              const stream = await navigator.mediaDevices.getUserMedia({
                audio: true,
              });
              state.stream = stream;
              state.isShowVoiceInput = true;
            } else if (permissionStatus.state === "denied") {
              showDialog({ message: "已拒绝语音授权" });
            } else if (permissionStatus.state === "prompt") {
              const stream = await navigator.mediaDevices.getUserMedia({
                audio: true,
              });
            }
            console.log("Permission state changed:", permissionStatus.state);
          };
        })
        .catch(function (error) {
          // alert("Error checking permission:" + error);
        });
    } else {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      if (stream) {
        state.stream = stream;
        state.isShowVoiceInput = true;
      }
    }
  }
};
// 在组件挂载时添加事件监听器

onMounted(() => {
  createSession()
  // alert(/wxwork/i.test(navigator.userAgent))
  state.isComWx = /wxwork/i.test(navigator.userAgent);
  document.addEventListener("click", handleDocumentClick);
  // if(localStorage.getItem('isPreview') === 'true') {
  //   setOldSession({id: localStorage.getItem('sessionId')})
  //   localStorage.removeItem('isPreview');
  //   localStorage.removeItem('sessionId')
  // }
  state.userInfo = localStorage.getItem("userInfo")
    ? JSON.parse(localStorage.getItem("userInfo"))
    : null;
  scrollToBottom();
  getHomeInfo();
  proxy?.$utils.setCheckDomColor(".main-container", "background", "#F1F8FE");
  getQuizRecommend(0);
  getFeedBackSelect();
  window.addEventListener("scroll", handleScroll);
  if (props.selectOldWin) {
    clickItemQa(props.selectOldWin, 1);
  } else if (proxy?.$route.query?.sendText) {
    clickItemQa(proxy?.$route.query?.sendText, 5);
  } else {
    setTimeout(() => {
      state.isShowReco = true;
    }, 1000);
  }
  proxy?.$nextTick(() => {
    getConfigSignature();
  });
});
// 在组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
  document.removeEventListener("click", handleDocumentClick);
});
const wxAuth = (data: any) => {
  const env = localStorage.getItem("env");
  if (env === "wxwork") {
    wx.config({
      beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: process.env.VUE_APP_COMCHAT_APPID, // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成签名的随机串
      signature: data.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
      jsApiList: [
        "stopRecord",
        "checkJsApi",
        "startRecord",
        "translateVoice",
        "shareAppMessage",
        "shareWechatMessage",
      ], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
    });
  } else {
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: process.env.VUE_APP_WECHAT_APPID, // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成签名的随机串
      signature: data.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
      jsApiList: [
        "stopRecord",
        "checkJsApi",
        "startRecord",
        "translateVoice",
        "updateAppMessageShareData",
        "updateTimelineShareData",
        "onMenuShareAppMessage",
        "onMenuShareTimeline",
      ], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
    });
  }
};
const getConfigSignature = async () => {
  const env = localStorage.getItem("env");
  let url =
    env === "wxwork"
      ? process.env.VUE_APP_BASE_API_URL + "/wechatApi/getJSTicket"
      : process.env.VUE_APP_BASE_API_URL + "/wechatApi/getOAJSTicket";
  proxy?.$api
    .post(url, {
      url: window.location.href.split("#")[0],
    })
    .then((res: any) => {
      console.log(res, "微信校验");
      if (res.code === 200) {
        wxAuth(res.data);
      }
    });
};
const getFeedBackSelect = () => {
  const env = state.checkedLang
    ? "/wechatApi/dict/feedbackcontent_en"
    : "/wechatApi/dict/feedbackcontent";
  proxy?.$api.get(process.env.VUE_APP_BASE_API_URL + env).then((res: any) => {
    if (res.code === 200 && res.data.length > 0) {
      state.feedBackSelect = res.data;
    }
  });
};
// 流式获取问答数据
const initSSE = () => {
  if (!state.sendHidenText) {
    state.sendHidenText = state.sendText;
  }
  const sendText =
    JSON.parse(JSON.stringify(state.sendText)) ||
    JSON.parse(JSON.stringify(state.sendHidenText));
  if (!sendText) {
    proxy?.$showToast("发送内容不能为空");
    return false;
  }
  if (state.isNewWindow) {
    state.isNewWindow = false;
  }
  if (state.isShowReco) {
    state.isShowReco = false;
  }
  if (state.isWait || state.isDisabled) {
    return;
  }

  state.isDisabled = true;
  state.showConsultation = true;
  state.isWait = true;
  state.printBackHtml = "";
  state.guessList = [];
  let obj = {
    text: sendText,
    type: 0,
    fileList: state.fileList,
    fileListDoc: state.fileListDoc,
  };
  // state.fileList = [];
  state.consultationList.push(obj);
  let answerData: any = [];
  scrollToBottom();
  state.sendText = "";
  // state.sendHidenText = "";
  if (state.questionType === 6) {
    state.isShowImageList = false;
    initImageSSE(sendText);
  } else if (state.questionType === 7) {
    state.isShowDocList = false;
    initImageSSE(sendText);
  } else {
    initTextSSE(sendText);
  }
};
// 获取图片问答流式数据
const initImageSSE = (sendText: string) => {
  let apiFn = "";
  let params = "";
  if (state.questionType === 6) {
    apiFn = "/wechatApi/VisualUnderstanding";
    params = JSON.stringify({
      questionContent: sendText,
      sessionId: state.sessionId || localStorage.getItem("sessionId"),
      imgUrl: state.fileList,
      questionType: state.questionType,
    });
  } else if (state.questionType === 7) {
    apiFn = "/wechatApi/calAliFileRag";
    params = JSON.stringify({
      questionContent: sendText,
      sessionId: state.sessionId || localStorage.getItem("sessionId"),
      imgUrl: state.fileListDoc.map((i: any) => i.url),
      fileIds: state.fileListDoc.map((i: any) => i.file_id),
      questionType: state.questionType,
    });
  }
  let eventSourceUrl =
    process.env.VUE_APP_BASE_API_URL +
    `${apiFn}?questionContent=${encodeURIComponent(sendText)}&questionType=${
      state.questionType
    }&lang=${state.checkedLang ? "en" : "zh"}&token=${localStorage.getItem(
      "token"
    )}&requestTime=${moment().valueOf()}`;
  if (state.sessionId) {
    eventSourceUrl =
      process.env.VUE_APP_BASE_API_URL +
      `${apiFn}?questionContent=${encodeURIComponent(sendText)}&questionType=${
        state.questionType
      }&lang=${state.checkedLang ? "en" : "zh"}&token=${localStorage.getItem(
        "token"
      )}&requestTime=${moment().valueOf()}&sessionId=${state.sessionId}`;
  }

  state.controller = new AbortController();
  const { signal } = state.controller;
  fetchEventSource(eventSourceUrl, {
    method: "POST",
    signal: signal,
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
    },
    body: params,
    onmessage(event) {
      state.fileList = [];
      state.fileListDoc = [];
      let data = JSON.parse(event.data);
      if (state.isWait) {
        state.isWait = false;
      }
      if (state.printEnd) {
        state.printEnd = false;
      }
      if (!state.sessionId) {
        state.sessionId = data.sessionId;
      }
      state.answerObj = Object.assign({}, data);
      state.printAllHtml = data.answerContent;
      updateContent(data);
      // 在这里操作流式数据
    },
    onclose() {
      stopStream(1);
    },
    onerror(error) {
      throw error;
      //返回流报错
    },
  });
};
// 获取文字问答流式数据

const conversation_id = ref()
const createSession = async (isCreate = false) => {
  conversation_id.value = ''
  // 如果有id则不用创建智能体
  // if (localStorage.getItem(props.bot_id) && !isCreate) {
  //   let objId = JSON.parse(localStorage.getItem(props.bot_id))
  //   conversation_id.value = objId[props.bot_id].conversation_id
  //   await pollForAnswer(false)
  // } else {
  //   const res = await proxy?.$api.post("https://api.coze.cn/v1/conversations", {
  //   }, {
  //     headers: {
  //       'Authorization': 'Bearer app-q1WQIYFgyDI4yjbeV2h6PYMi',
  //       "Content-Type": "application/json"
  //     },
  //   })
  //   conversation_id.value = res.data.id
  //   // 创建完成之后将智能体id和创建会话id存本地

  //   const data = {
  //     [props.bot_id]: {
  //       bot_id: props.bot_id,
  //       conversation_id: conversation_id.value
  //     }
  //   };

  //   localStorage.setItem(props.bot_id, JSON.stringify(data));
  // }


}
const chat_id = ref()
const sendMessage = async (sendText: any) => {
  const res = await proxy?.$api.post(`http://10tz44994vg46.vicp.fun/v1/chat-messages`, {
    "inputs": {},
    "query": sendText,
    "response_mode": "streaming",
    "conversation_id": conversation_id.value,
    "user": "123",
    "files": [
      {
        "type": "image",
        "transfer_method": "remote_url",
        "url": "https://cloud.dify.ai/logo/logo-site.png"
      }
    ]

  }, {
    headers: {
      'Authorization': 'Bearer ' + props.bot_id,
      "Content-Type": "application/json"
    },

  })
  // 使用正则表达式匹配 conversation_id 的值
const match = res.match(/"conversation_id"\s*:\s*"([^"]*)"/);
const conversationId = match ? match[1] : null;
console.log(conversationId);
  conversation_id.value = conversationId


  console.log("-------------")
  return res
}
const getMessages = async () => {
  const res = await proxy?.$api.get(`http://10tz44994vg46.vicp.fun/v1/messages?user=123&last_id=&limit=20&conversation_id=${conversation_id.value}`, {
    "order": "ASC"
  }, {
    headers: {
      'Authorization': 'Bearer ' + props.bot_id,
      "Content-Type": "application/json"
    },

  })



  // console.log('getMessages',res)
  return res

}

let pollCount = 0; // 轮询计数器
const maxPolls = 10; // 最大轮询次数
const interval = 3000; // 每3秒轮询一次

const pollForAnswer = async (isUpdateContent = true) => {
  const pollId = setInterval(async () => {
    if (pollCount >= maxPolls) {
      console.log('达到最大轮询次数，停止轮询。');
      clearInterval(pollId); // 清除定时器，停止轮询
      return;
    }

    try {
      const res = await getMessages()

      if (res.data) {
        state.sendText = ''
    
        state.consultationList = res.data.flatMap((item, index) => {
          const questionResult = {
            text: item.query ||item.text,
            type: 0, 
            imgList: [],
            fileList: [],
            answerContent: item.answer , 
            printEnd: false,
          };

          const answerResult = {
            text: item.query ,
            type: 1, 
            imgList: [],
            fileList: [],
            answerContent: item.answer , 
            printEnd: true, 
          };

          return [ questionResult,answerResult];
        })
        // .reverse(); 
        console.log("state.consultationList",state.consultationList)

        if (state.isWait) {
          state.isWait = false;
        }
        if (state.printEnd) {
          state.printEnd = false;
        }

        // state.answerObj = Object.assign({}, data);

        console.log("sta123123te", state)

        const data = {
          answerContent: res.data[res.data.length-1].answer,
          questionContent: res.data[res.data.length-1].query
        }
        state.isDisabled = false
        state.printAllHtml = res.data[res.data.length-1].answer
        state.currentIndex = 0
        if (isUpdateContent) {
          updateContent(data);

        } else {
          state.printBackHtml = state.printAllHtml

        }
        clearInterval(pollId); // 停止轮询

      }
    } catch (error) {
      console.error('Error during polling:', error);
    }

    pollCount++; // 更新轮询计数器
  }, interval);
};

// 获取文字问答流式数据
const initTextSSE = async (sendText: string) => {
  // let eventSourceUrl =
  //   process.env.VUE_APP_BASE_API_URL +
  //   `/wechatApi/quizRaq?questionContent=${encodeURIComponent(
  //     sendText
  //   )}&questionType=${state.questionType}&lang=${state.checkedLang ? "en" : "zh"
  //   }&token=${localStorage.getItem("token")}&requestTime=${moment().valueOf()}`;
  // if (state.sessionId) {
  //   eventSourceUrl =
  //     process.env.VUE_APP_BASE_API_URL +
  //     `/wechatApi/quizRaq?questionContent=${encodeURIComponent(
  //       sendText
  //     )}&questionType=${state.questionType}&lang=${state.checkedLang ? "en" : "zh"
  //     }&token=${localStorage.getItem(
  //       "token"
  //     )}&requestTime=${moment().valueOf()}&sessionId=${state.sessionId}`;
  // }

  state.printEnd = true;
  await sendMessage(sendText)
  await pollForAnswer()



  // if (state.questionType === 8) {
  //   eventSourceUrl += `&isThink=${state.isSk}`;
  //   if (state.fileList.length > 0) {
  //     eventSourceUrl += `&fileUrl=${state.fileList[0].fileUrl}`;
  //   }
  // }
  // console.log('state',state)
  // state.fileList = []
  // state.eventSource = new EventSource(eventSourceUrl);
  // state.eventSource.onopen = () => { };
  // state.eventSource.onmessage = (event: any) => {
  //   resetTimeout();
  //   if (
  //     state.questionType === 8 &&
  //     event.data.includes("Error: Unexpected response 'DONE' found.")
  //   ) return;
  //   if (
  //     state.questionType === 8 &&
  //     event.data.includes("The document content is empty")
  //   ) {
  //     stopStream(1, event.data)
  //     return
  //   }
  //   let data: any = JSON.parse(event.data);
  //   console.log('ces',data)
  //   if (data.answerContent || data.reasoningContent) {

  //     if (data.reasoningContent && !data.answerContent) {
  //       if (state.isWait) {
  //         state.isWait = false;
  //       }
  //       if (state.printEnd) {
  //         state.printEnd = false;
  //       }
  //       if (!state.sessionId) {
  //         state.sessionId = data.sessionId;
  //       }
  //       state.answerObj = Object.assign({}, data);
  //       state.printThinkAllHtml = data.reasoningContent;
  //       updateThinkContent(data);
  //     } else {
  //       if (
  //         data.answerContent.startsWith("问题检索中") ||
  //         data.answerContent.startsWith("问题检索") ||
  //         data.answerContent.startsWith("问题检") ||
  //         data.answerContent.startsWith("问题") ||
  //         data.answerContent.startsWith("问")
  //       ) {
  //         return;
  //       } else {
  //         if (state.isWait) {
  //           state.isWait = false;
  //         }
  //         if (state.printEnd) {
  //           state.printEnd = false;
  //         }
  //         if (!state.sessionId) {
  //           state.sessionId = data.sessionId;
  //           assistantLeftRef.value?.newSessionBox();
  //         }
  //         state.answerObj = Object.assign({}, data);
  //         state.printAllHtml = data.answerContent;
  //         console.log("state",state)
  //         console.log("data",data)
  //         updateContent(data);
  //       }
  //     }
  //   }
  // };
  // state.eventSource.onerror = (error: any) => {
  //   clearTimeout(timeoutHandle);
  //   stopStream(1);
  // };
}

// const initTextSSE = (sendText: string) => {
//   let eventSourceUrl =
//     process.env.VUE_APP_BASE_API_URL +
//     `/wechatApi/quizRaq?questionContent=${encodeURIComponent(
//       sendText
//     )}&questionType=${state.questionType}&lang=${
//       state.checkedLang ? "en" : "zh"
//     }&token=${localStorage.getItem("token")}&requestTime=${moment().valueOf()}`;
//   if (state.sessionId) {
//     eventSourceUrl =
//       process.env.VUE_APP_BASE_API_URL +
//       `/wechatApi/quizRaq?questionContent=${encodeURIComponent(
//         sendText
//       )}&questionType=${state.questionType}&lang=${
//         state.checkedLang ? "en" : "zh"
//       }&token=${localStorage.getItem(
//         "token"
//       )}&requestTime=${moment().valueOf()}&sessionId=${state.sessionId}`;
//   }
//   state.eventSource = new EventSource(eventSourceUrl);
//   state.eventSource.onopen = () => {};

//   state.eventSource.onmessage = (event: any) => {
//     let data: any = JSON.parse(event.data);

//     if (
//       data.answerContent.startsWith("问题检索中") ||
//       data.answerContent.startsWith("问题检索") ||
//       data.answerContent.startsWith("问题检") ||
//       data.answerContent.startsWith("问题") ||
//       data.answerContent.startsWith("问")
//     ) {
//       return;
//     } else {
//       if (state.isWait) {
//         state.isWait = false;
//       }
//       if (state.printEnd) {
//         state.printEnd = false;
//       }
//       if (!state.sessionId) {
//         state.sessionId = data.sessionId;
//       }

//       // const regex = /<classify>(.*?)<\/classify>/s;
//       // const match = regex.exec(data.answerContent);
//       // let classification: any = [];
//       // if (match && match.length > 1) {
//       //   let arr = match[1].split("|");
//       //   for (let i = 0; i < arr.length; i++) {
//       //     const regex1 = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
//       //     arr[i] = arr[i].replace(
//       //       regex1,
//       //       `<a href="mailto:$&" style="text-decoration: underline;color: #5cb2ff;">$&</a>`
//       //     );
//       //     arr[i] = proxy?.$utils.phoneReg(arr[i]) || arr[i];
//       //   }
//       //   classification = arr;
//       // }
//       // data.answerContent = data.answerContent.replace(
//       //   /<classify>(.*?)<\/classify>/s,
//       //   ""
//       // );

//       // state.answerObj = Object.assign({}, data, {
//       //   classification: classification,
//       // });

//       state.answerObj = Object.assign({}, data);

//       state.printAllHtml = data.answerContent;
//       updateContent(data);
//     }
//   };
//   state.eventSource.onerror = (error: any) => {
//     stopStream(1);
//   };
// };
// 对流式数据中返回的content进行处理再显示
const backHtm = computed(() => {
  return marked(state.printBackHtml);
});

// 对每一条流式数据进行处理打印及效果处理
let timeoutId = ref()
// 对每一条流式数据进行处理打印及效果处理
const updateContent = (data: any) => {
  state.isDisabled = true
  if (state.currentIndex < state.printAllHtml.length) {
    state.printBackHtml += state.printAllHtml[state.currentIndex];
    state.currentIndex++;
    timeoutId.value = setTimeout(() => {
      updateContent(data);
    }, 50); // 调整延迟以控制显示速度
  } else {
    state.isDisabled = false;
    state.sendHidenText = ''

  }
};
// 停止流 以及后续的操作
const stopStream = (type: number) => {
  const sendText =
    JSON.parse(JSON.stringify(state.sendText)) ||
    JSON.parse(JSON.stringify(state.sendHidenText));


    clearTimeout(timeoutId.value);
  state.printBackHtml = state.printAllHtml
  state.isDisabled = false
  state.sendHidenText = ''
  state.sendText = ''
  if (state.eventSource) {
    state.eventSource.close();
  }
  if (state.controller) {
    state.controller.abort();
  }
  if (state.eventSource || state.controller) {
    if (state.isWait) {
      state.consultationList.push({
        type: type,
        answerContent: state.actionStop
          ? `${
              state.checkedLang
                ? language.messageEN.cancel
                : language.messageZH.cancel
            }`
          : `${
              state.checkedLang
                ? language.messageEN.feedback
                : language.messageZH.feedback
            }`,
      });
      state.isDisabled = false;
      state.sendHidenText = "";
      state.sendText = "";
    } else {
      let obj: any = state.answerObj;
      let html =
        state.printAllHtml +
        `<p style="font-weight:700;font-size: 10px; margin: 4px 0;display: block;  color: #333;">* ${
          state.checkedLang
            ? language.messageEN.confirmation
            : language.messageZH.confirmation
        }</p>`;
      if (obj) {
        html = proxy?.$utils.phoneReg(html, obj.requestId) || html;
        obj.answerContent = marked(html);
        obj.answerRaw = obj.answerRaw ? JSON.parse(obj.answerRaw) : null;
        obj.printEnd = true;
        obj.activeNames = [];
        // obj.activeNames1 = obj.status == 0 ? ['1'] : [];
        obj.activeNames1 = ["1"];
        obj.ratevalue = 0;
        obj.isShowRate = true;
        obj.isShowRateOpBox = false;
        if (obj.status === 1) {
          state.consultationList.push(obj);
          if (state.questionType !== 6 && state.questionType !== 7) {
            getClassification(sendText, obj.requestId, obj.sessionType || 0);
          } else {
            streamEndOp();
          }
        } else if (obj.status === 0) {
          if (state.questionType !== 6 && state.questionType !== 7) {
            state.isWait = true;
            getClassification(
              sendText,
              obj.requestId,
              obj.sessionType || 0,
              obj
            );
          } else {
            streamEndOp();
          }
        }
        if (
          state.isYouKnown &&
          obj.status === 1 &&
          obj.answerRaw?.docReferencesDistinct?.length > 0
        ) {
          getQuizYouAsk(sendText, obj.requestId, obj.sessionType || 0);
        }
      }
    }
    state.sendText = "";
    // state.isDisabled = false;

    if (state.answerObj && state.answerObj.status === 0) {
      state.isWait = true;
    } else {
      state.isWait = false;
    }

    state.printEnd = true;
    state.isYouKnown = false;
    state.printBackHtml = "";
    state.printAllHtml = "";
    state.currentIndex = 0;
    state.answerObj = null;
    state.actionStop = false;
    state.fileList = [];
    state.fileListDoc = [];
    if (type === 2) {
      state.consultationList = [];
    }
  }
};

// 在获取问答结束后继续获取分类类型数据
const getClassification = (
  questionContent: string,
  requestId: string,
  sessionType: string,
  obj: any = null
) => {
  let eventSourceUrl =
    process.env.VUE_APP_BASE_API_URL +
    `/wechatApi/quizCla?questionContent=${encodeURIComponent(
      questionContent
    )}&sessionId=${
      state.sessionId
    }&requestId=${requestId}&sessionType=${sessionType}&lang=${
      state.checkedLang ? "en" : "zh"
    }&token=` +
    localStorage.getItem("token");
  state.quizClassification = new EventSource(eventSourceUrl);
  state.quizClassification.onopen = () => {};

  state.quizClassification.onmessage = (event: any) => {
    state.classiFicationData = JSON.parse(event.data);
  };
  state.quizClassification.onerror = (error: any) => {
    stopStream1(1, obj);
  };
};
const stopStream1 = (type: number, obj: any = null) => {
  if (state.quizClassification) {
    state.quizClassification.close();
  }
  let consultationList = state.consultationList;
  if (obj) {
    consultationList.push(obj);
  }
  for (let i = 0; i < consultationList.length; i++) {
    let classification: any = [];
    let arr = state.classiFicationData?.classContent?.split("|") || [];
    for (let j = 0; j < arr.length; j++) {
      arr[j] = arr[j].replace(
        /\ball\b/g,
        state.checkedLang
          ? language.messageEN.contacts
          : language.messageZH.contacts
      );
      if (obj && obj.status === 0 && arr[j].includes("业务领域")) {
        let typeText = arr[j].split(":")[1];
        // typeText = typeText.replace(/;/g, " ");
        obj.answerContent = obj.answerContent.replace(
          /<<类型>>|&lt;&lt;类型&gt;&gt;/g,
          `<span class="phone-tips" data-id=${
            obj.requestId
          } style="color: #5CB2FF">${typeText.trim()}</span>`
        );
      }
      arr[j] = proxy?.$utils.phoneReg(arr[j], arr[j].requestId);

      let seconed = marked(arr[j]);
      // for (let k = 0; k < seconed.length; k++) {
      //   seconed[k] = proxy?.$utils.phoneReg(seconed[k]) || seconed[k];
      // }

      arr[j] = seconed;
    }
    classification = arr;

    if (consultationList[i].requestId === state.classiFicationData?.requestId) {
      consultationList[i].classification = classification;
    }
  }
  state.isShowLikePopover = consultationList.length === 2;
  state.isDisabled = false;
  state.sendHidenText = "";
  state.isWait = false;
  state.classiFicationData = null;
  state.consultationList = consultationList;
  setTimeout(() => {
    let ele = document.querySelectorAll(".itema");
    ele[ele.length - 1].scrollIntoView({
      behavior: "smooth",
      block: "start", // 使元素顶部对齐视口顶部
    });
  }, 500);
};
const streamEndOp = () => {
  state.isShowLikePopover = state.consultationList.length === 2;
  state.isDisabled = false;
  state.sendHidenText = "";
  state.isWait = false;
  state.classiFicationData = null;
  state.consultationList = state.consultationList;
  setTimeout(() => {
    let ele = document.querySelectorAll(".itema");
    ele[ele.length - 1].scrollIntoView({
      behavior: "smooth",
      block: "start", // 使元素顶部对齐视口顶部
    });
  }, 500);
};
// 获取问答数据后 再查看是否需要 显示猜你想问
const getQuizYouAsk = (
  questionContent: string,
  requestId: string,
  sessionType: string
) => {
  proxy?.$api
    .get(process.env.VUE_APP_BASE_API_URL + "/wechatApi/quizEro", {
      questionContent,
      requestId,
      sessionType,
      sessionId: state.sessionId,
      token: localStorage.getItem("token"),
    })
    .then((res: any) => {
      if (res.code === 200 && res.data.length > 0) {
        state.guessList = res.data.map((i: any) => i);
        setTimeout(() => {
          let ele = document.querySelectorAll(".itema");
          ele[ele.length - 1].scrollIntoView({
            behavior: "smooth",
            block: "start", // 使元素顶部对齐视口顶部
          });
        }, 500);
      }
    });
};


const modelChange = (e: any) => {
  if (e) {
    state.deepsShow = true;
  }
  state.checkedLang = false;
  state.modelType = e
  console.log('12',state.modelType)


  state.isNewWindow = true;
  // input.value.focus();
  state.consultationList = [];
  state.guessList = [];
  state.sessionId = "";
  state.isShowLikePopover = false;
  // input.value.focus();

  window.scrollTo(0, document.body.scrollHeight);
  stopReceiveData(2);
};
</script>

<style lang="scss" scoped>
.assistant-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 40px;
  background-color: #f1f8fe;
  position: relative;
  .ratesure {
    position: absolute;
    bottom: -36px;
    left: 0;
    right: 0;
    margin: auto;
    top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    img {
      width: 92px;
    }
  }
  .bg {
    width: 100%;
    background-size: cover;
    height: 200px;

    position: fixed;
    top: 0;
    z-index: 999;
    background: linear-gradient(152.42deg, rgb(92, 178, 255) 17.78%, rgb(255, 177, 177) 100%);


  }

  .top-con {
    
    position: relative;
    z-index: 999;
    // width: calc(100% - 60px);
    margin: 0 auto;
    padding: 0px 30px;
    // background: linear-gradient(152.42deg, rgb(92, 178, 255) 17.78%, rgb(255, 177, 177) 100%);
 
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32px;
      font-weight: 900;
      letter-spacing: 0px;
      margin: 56px 0;
      margin-bottom: 25px;
      z-index: 999;
      color: #ffffff;
      .header-name {
        display: flex;
        gap: 10px;
        img {
          object-fit: contain;
        }
      }
      & > div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
      }
    }
  }
  .weather {
    height: 60px;
    color: #fff;
    display: flex;
    align-items: center;
    margin-left: 20px;
    font-weight: normal;
  }
  .tip {
    display: block;
    font-size: 28px;
    color: v-bind("themeColor.textColorLightest");
    margin: 20px 0;
    font-weight: 500;
  }
  .content {
    display: flex;
    margin-top: 24px;
    width: 100%;
    flex-direction: column;
    background: v-bind("themeColor.fillWhite");
    padding: 0 30px;
    border-radius: 24px;
    &.consultation-mode {
      background: none;
      padding: 0;
      border-radius: 0;
      border-radius: 20px;
      padding: 36px 0 24px;
      height: 83vh;
      overflow-y: scroll;
      margin: 0 30px;
      z-index: 10;
      width: calc(100% - 60px);
      margin-top: 48px;
      padding-top: 160px;

      &::-webkit-scrollbar {
        display: none;
      }
    }
    .desc {
      display: flex;
      color: v-bind("themeColor.textColor");
    }
    .guess-to-ask {
      & > span {
        font-size: 28px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 38px;
        color: rgba(148, 162, 176, 1);
        margin: 34px 0 12px 0;
        display: block;
      }
      .ask-list {
        p {
          border-radius: 20px;
          background: rgba(255, 255, 255, 0.6);
          border: 0.5px solid rgba(168, 204, 237, 1);
          padding: 16px 28px;
          font-size: 28px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 34px;
          color: rgba(40, 51, 74, 1);
          margin-bottom: 20px;
        }
      }
    }
    .consultation-container {
      display: flex;
      flex-direction: column;
      z-index: 10;
      .greet {
        opacity: 1;
        margin-top: 20px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.8);
        position: relative;
        padding: 36px 42px;
     
        .ai-icon {
          display: flex;
        
          justify-content: space-between;
          div {
            & > span {
              display: block;
              font-size: 36px;
              font-weight: normal;
              letter-spacing: 0px;
              line-height: 50px;
              color: rgba(40, 51, 74, 1);
              text-align: left;
              vertical-align: top;
            }
          }
        }
        .avatar {
          // width: 231px;
          // margin-top: -80px;
          margin-right: 20px;
        }
        .con-text {
          font-size: 28px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 38px;
          color: rgba(151, 163, 174, 1);
          text-align: left;
          vertical-align: top;
          margin-top: 16px;
        }
      }
      .item.itemb {
        // padding: 0 0.533rem 0 0.587rem;
        flex-direction: column;
        position: relative;

        .con.loading-mask {
          background: initial;
        }
        .k-loader {
          display: inline-block;
          font-size: 2em;
          margin: 0 0.5em;
          position: relative;
          height: 0.5em;
          width: 1em;
        }
        .k-loader:before,
        .k-loader:after {
          content: "";
          display: block;
          height: 0.3em;
          position: absolute;
          width: 0.3em;
        }
        .k-loader:before {
          animation: k-loadingK 1s ease-in-out infinite,
            k-loadingM 0.33s ease-in-out infinite;
          background: #5cb2ff;
        }
        .k-loader:after {
          animation: k-loadingL 1s ease-in-out infinite,
            k-loadingN 0.33s ease-in-out infinite;
          background: #ffb1b1;
        }
        .k-small {
          font-size: 1em;
        }
        .k-large {
          font-size: 4em;
        }
        .k-circle:before,
        .k-circle:after {
          border-radius: 50%;
        }
        .k-circle-before:before {
          border-radius: 50%;
        }
        .k-circle-after:after {
          border-radius: 50%;
        }
        @keyframes k-loadingK {
          0% {
            left: 0;
            transform: scale(1.1);
          }
          50% {
            left: 100%;
            transform: scale(1);
          }
          100% {
            left: 0;
            transform: scale(1.1);
          }
        }
        @keyframes k-loadingL {
          0% {
            left: 100%;
            transform: scale(1.1);
          }
          50% {
            left: 0;
            transform: scale(1);
          }
          100% {
            left: 100%;
            transform: scale(1.1);
          }
        }
        #loading {
          height: 60px;
          width: 100%;
          z-index: 1;
          margin-top: 0px;
          top: 0px;
        }
        #loading-center {
          position: relative;
        }
        #loading-center-absolute {
          width: auto;
        }
        .object {
          width: 8px;
          height: 30px;
          margin-right: 5px;
          background: linear-gradient(152.42deg, #5cb2ff 17.78%, #ffb1b1 100%);
          -webkit-animation: animate 1s infinite;
          animation: animate 1s infinite;
          float: left;
        }

        .object:last-child {
          margin-right: 0px;
        }

        .object:nth-child(10) {
          -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
        }
        .object:nth-child(9) {
          -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
        }
        .object:nth-child(8) {
          -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
        }
        .object:nth-child(7) {
          -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
        }
        .object:nth-child(6) {
          -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
        }
        .object:nth-child(5) {
          -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
        }
        .object:nth-child(4) {
          -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
        }
        .object:nth-child(3) {
          -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
        }
        .object:nth-child(2) {
          -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
        }
        @-webkit-keyframes animate {
          50% {
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
          }
        }
        @keyframes animate {
          50% {
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
          }
        }

        .ai-icon {
          display: flex;
          align-items: center;
          margin-bottom: 24px;
          span {
            font-size: 28px;
            font-weight: normal;
            color: v-bind("themeColor.textColorGrey");
            line-height: initial;
            margin-left: 26px;
            vertical-align: bottom;
          }
        }
        .avatar {
          margin: 0;
        }
        .con {
          border-radius: 0px 10px 10px 10px;
          background: v-bind("themeColor.fillWhite");
          box-shadow: 0px 0px 4px v-bind("themeColor.fillBlueLight");
        }
      }
      .item.itema {
        padding: 0 0.533rem 0 0.587rem;
        display: block;
        text-align: right;
        .file-qa {
          text-align: right;
          width: 100%;
          overflow: hidden;
          img {
            width: 60%;
          }
        }
        .file-doc{
          .file_item {
          width: 375px;
          height: auto;
          padding: 10px;
          background: #f5f5f5;
          margin-right: 10px;
          float: right;
          margin-left: 10px;
          .upload-image-priview-box-doc {
            display: flex;
            align-items: center;
            gap: 10px;
            .file_de {
              width: 70%;
              .file_name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 24px;
              }
              .file_info {
                display: flex;
                gap: 10px;
                color: #888;
                font-size: 20px;
              }
            }
          }
        }
        }
        
        .con {
          border-radius: 20px 20px 0px 20px;
          background: v-bind("themeColor.fillColor");
          color: v-bind("themeColor.textColorLightest");
          width: auto;
          display: inline-block;
          .voice-loader {
            margin: auto;
            width: 155px;
            height: 60px;
            display: flex;
            justify-content: center;
            gap: 1px;
          }

          .voice-loader span {
            display: block;
            background: #fff;
            width: 7px;
            height: 10%;
            border-radius: 14px;
            margin-right: 5px;
            float: left;
            margin-top: 15%;
          }
          .voice-loader {
            & > span:last-child {
              margin-right: 0px;
            }

            & > span:nth-child(1) {
              height: 20%;
            }

            & > span:nth-child(2) {
              height: 40%;
              margin-top: 10%;
            }

            & > span:nth-child(3) {
              height: 60%;
              margin-top: 5%;
            }

            & > span:nth-child(4) {
              height: 80%;
              margin-top: 0;
            }

            & > span:nth-child(5) {
              height: 60%;
              margin-top: 5%;
            }
            & > span:nth-child(6) {
              height: 40%;
              margin-top: 10%;
            }

            & > span:nth-child(7) {
              height: 20%;
              margin-top: 15%;
            }
          }
          .voice-loader-animate {
            & > span:last-child {
              margin-right: 0px;
            }

            & > span:nth-child(1) {
              animation: load 1.5s 1.4s infinite linear;
            }

            & > span:nth-child(2) {
              animation: load 1.5s 1.2s infinite linear;
            }

            & > span:nth-child(3) {
              animation: load 1.5s 1s infinite linear;
            }

            & > span:nth-child(4) {
              animation: load 1.5s 0.8s infinite linear;
            }

            & > span:nth-child(5) {
              animation: load 1.5s 0.6s infinite linear;
            }
            .loader span:nth-child(6) {
              animation: load 2.5s 0.4s infinite linear;
            }

            .loader span:nth-child(7) {
              animation: load 2.5s 0.2s infinite linear;
            }
          }

          @keyframes load {
            0% {
              background: #fff;
              margin-top: 15%;
              height: 10%;
            }

            50% {
              background: #f5f5f5;
              height: 100%;
              margin-top: 0%;
            }

            100% {
              background: #fff;
              height: 10%;
              margin-top: 15%;
            }
          }
        }
      }
      .item {
        display: flex;
        justify-content: flex-start;
        margin-top: 40px;
        &:first-child {
          margin-top: 0;
        }
        .module-type {
          margin-top: 24px;
          span {
            margin-right: 24px;
            font-size: 28px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 58px;
            color: rgba(148, 162, 176, 1);
            padding: 16px 50px;
            border-radius: 220px;
            background: rgba(240, 241, 242, 1);
          }
          span.active {
            background: rgba(219, 238, 255, 1);
            color: #5cb2ff;
          }
        }
        .avatar {
          margin-left: 16px;
          width: 51.6px;
          margin-right: 16px;
        }
        &:nth-child(2n) {
          justify-content: flex-end;
          .avatar {
            margin-left: 16px;
          }
        }
        .con {
          max-width: 100%;
          display: flex;
          flex-direction: column;
          padding: 24px 20px 22px 22px;
          border-radius: 24px;
          color: v-bind("themeColor.textColor");
          // box-shadow: 0px 0px 8px v-bind("themeColor.shadowColor");
          font-size: 28px;
          overflow: hidden;
          .con-text {
            display: flex;
            flex-direction: column;
            // white-space: pre-wrap;
            overflow: hidden;
            ref {
              color: #999;
            }
            li {
              a {
                color: #5cb2ff;
              }
            }
            a {
              color: #5cb2ff !important;
            }
            .docname {
              font-size: 24px;
              color: v-bind("themeColor.textColor");
            }
            span {
              font-size: 28px;
            }
          }
          .con-file {
            display: flex;
            flex-direction: column;

            margin-top: 20px;
            gap: 6px;
            .fromto {
              color: v-bind("themeColor.textColorLighten");
            }
            .file-item {
              margin: 4px 0px;
              word-break: break-all;
              color: v-bind("themeColor.textColor");
              &.active {
                color: #5cb2ff;
              }
              div:last-child {
                margin-top: 20px;
              }
              a {
                text-decoration: underline;
                color: #5cb2ff;
              }
              .iconfont {
                color: #5cb2ff;
                margin-right: 4px;
              }
            }
          }
          .con-opt {
            display: flex;
            justify-content: space-between;
            padding: 18px 0 0 0;
            .left {
              img {
                width: 36px;
                margin-right: 45px;
              }
              span {
                margin-left: 68px;
                &:first-child {
                  margin-left: 0;
                }
                &.icon-good-a-copy,
                &.icon-quxiaodianzan-a-copy {
                  color: #e97600;
                }
              }
            }
            .right {
              img {
                width: 36px;
                margin-left: 45px;
              }
            }
          }
        }
      }
    }
  }
  .cxb-box {
    // position: fixed;
    z-index: 15;
    .cxb {
      img {
        width: 100px;
      }
    }
    .cxb-text {
      position: absolute;
      top: 0;
      left: 80px;
      img {
        width: 136px;
        margin-top: 10px;
      }
      .hot-search{
        position: relative;
        left: 50px;
        top: -72px;
        font-size: 24px;
        color: #fff;
      }
    }
  }

  .assistant-footer {
    display: flex;
    position: fixed;
    flex-direction: column;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 10px 10px;
    background: #ffffff;
    box-shadow: 0px 0px 8px rgba(92, 178, 255, 0.4);
    z-index: 100;
    min-height: 108px;
    padding-bottom: calc(48px + constant(safe-area-inset-bottom));
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
    .option-area {
      display: flex;
      width: 100%;
      align-items: center;
      padding-left: 32px;
      .other-opt {
        align-self: center;
        display: flex;
        width: 48px;
      }
      .input-box {
        position: relative;

        &::before {
          content: "";
          width: 2px;
          height: 60px;
          transform: rotate(180deg);
          background: #f4f6f9;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
        }
        position: relative;
        padding-left: 10px;
        margin-left: 10px;
        flex: 1;
        .other-yuyin {
          display: flex;
          width: 60px;
        }
      }
    }
    .upload-image-priview {
      display: flex;
      margin-bottom: 30px;
      .upload-image-priview-box {
        position: relative;
        width: 150px;
        height: 150px;
        background: #4c4c4c;
        border-radius: 16px;
        overflow: hidden;
        .upload-image-priview-box-close {
          position: absolute;
          right: 5px;
          top: 5px;
          img {
            width: 30px;
          }
        }
        .upload-image-priview-box-img {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
        }
        .upload-image-priview-box-img img {
          width: 100%;
        }
      }
      .upload-doc-priview-box {
        width: 375px;
        height: auto;
        padding: 10px;
        background: #f5f5f5;
        margin-right: 10px;
        .upload-image-priview-box-doc {
          display: flex;
          align-items: center;
          gap: 10px;
          .file_de {
            width: 70%;
            .file_name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 24px;
            }
            .file_info {
              display: flex;
              gap: 10px;
              color: #888;
              font-size: 20px;
            }
          }
        }
      }
    }
    .area-con {
      display: flex;
      width: 100%;
      padding: 20px 0;
      border-top: 1px solid #f5f5f5;
      .van-row {
        width: 100%;
        justify-content: center;
      }
      .area-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: v-bind("themeColor.textColorLighten");
        font-size: 24px;
        img {
          width: 86px;
          margin-bottom: 10px;
          border: 1px dashed v-bind("themeColor.borderColorLighten");
        }
      }
    }
    .ver {
      position: absolute;
      bottom: 103%;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      font-size: 20px;
      color: #4c4c4c;
      opacity: 0.5;
    }
  }
}
</style>
<style lang="scss">
.assistant-container {
  .assistant-footer {
    .van-cell-group {
      background: none;
    }
    .van-field {
      line-height: 40px;
      background: none;
      .van-field__control {
        font-size: 28px;
        color: v-bind("themeColor.textColorBlock");
      }
      &.textareaellipsis {
        .van-field__control {
          height: 50px !important;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%;
        }
      }
    }
    .van-cell-group--inset {
      margin: 0;
    }
  }
  .con-file {
    .van-cell {
      padding: 4px var(--van-cell-horizontal-padding);
    }
  }
}
.reco-box {
  left: 0.64rem !important;
  top: auto !important;
  .recommend-box {
    padding: 30px;
    position: relative;
    z-index: 2;
    border-radius: 20px 20px, 20px, 20px;
    background: #1196DB;

    box-shadow: 0px 0px 20px #007deb;
    .recommend {
      overflow: hidden;
      .nav-tab {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin: 10px 0;
        .nav-item {
          font-size: 28px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 38px;
          color: rgba(255, 255, 255, 0.5);
          text-align: left;
          vertical-align: top;
          position: relative;
          .item-text {
            position: relative;
            z-index: 2;
          }
          &.active {
            color: #fff;
            &::after {
              content: "";
              display: block;
              position: absolute;
              height: 8px;
              background: #1196DB;

              width: 100%;
              bottom: 2px;
              z-index: 1;
            }
          }
        }
      }
      .refresh {
        font-size: 28px;
        color: #ffffff;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        margin-top: 30px;
        gap: 10px;
      }
      .list {
        display: flex;
        width: 100%;
        flex-direction: column;
        color: v-bind("themeColor.textColor");
        .desc {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .robot {
          display: flex;
          align-items: center;
          gap: 18px;
          color: rgba(255, 255, 255, 0.5);

          span {
            font-size: 28px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 26.8px;
            color: rgba(255, 255, 255, 0.5);
          }
          .shu {
            width: 1px;
            height: 100%;
            background: #ffffff;
            height: 38px;
          }
          .dailyrecommendations {
            font-size: 32px;
            font-weight: 400;
            letter-spacing: 0px;
            color: #ffffff;
            font-weight: bold;
          }
          img {
            width: 50px;
            height: auto;
          }
        }

        .list-item {
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          width: 100%;
          background: rgba(255, 255, 255, 0.25);
          padding: 24px 32px 22px 26px;
          border-radius: 24px;
          span {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 28px;
            color: #fff;

            b {
              display: flex;
              width: 10px;
              height: 10px;
              background: #ffffff;
              margin-right: 16px;
              border-radius: 50%;
              flex-shrink: 0;
            }
            &.arrow {
              span {
                color: v-bind("themeColor.borderColor");
              }
            }
          }
        }
      }
    }
  }
}
.reco-box .van-popover__arrow {
  color: #5cb2ff !important;
}
.assistant-footer .van-popover__wrapper,
.loading-robat {
  display: inline-block;
  position: absolute;
  left: 1%;
  top: -94px;
}
.loading-robat {
  top: -114px;
}
.file-item a {
  color: #5cb2ff;
}
.con-text ref {
  color: #999;
}
.con-text p {
  margin-bottom: 16px;
  margin-top: 0;
  a {
    color: #5cb2ff;
  }
}
.con-text ul li + li {
  margin-top: 10px;
}
.feedback-box {
  .title {
    top: var(--van-popup-close-icon-margin);
    font-size: 28px;
    position: absolute;
  }
  .feedback-content {
    font-size: 24px;
    margin-top: 40px;
    padding-top: var(--van-popup-close-icon-margin);
    color: #888;
    .feedback-textarea {
      background: #f5f5f5;
      margin-top: 20px;
    }
    .feedback-back {
      margin-top: 20px;
      float: right;
    }
  }
}
.like-box {
  box-shadow: none;
  background: rgba(136, 136, 136, 1) !important;
  // box-shadow: 0px 0px 4px  rgba(92, 178, 255, 0.6)!important;
  // filter: drop-shadow(0px 0px 4px rgba(136, 136, 136, 1)) !important;
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 34px;
  border-radius: 8px;
  position: relative;
  .van-popover__content {
    background: initial;
    box-shadow: initial;
  }
  .sanj {
    width: 20px;
    height: 30px;
    position: absolute;
    left: 50px;
    top: -10px;
  }
  .close {
    font-size: 28px;
    position: absolute;
    top: 4px;
    right: 8px;
    color: rgba(255, 255, 255, 1);
  }
  p {
    padding: 38px 28px 14px 28px;
    box-sizing: border-box;
    font-size: 24px;
    color: rgba(255, 255, 255, 1);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 40px;
  }
  .van-popover__arrow {
    color: rgba(255, 255, 255, 0.6);
  }
  .sanj::before {
    content: "";
    border: 4rpx solid rgba($color: #888888, $alpha: 1);
    background: #888888;
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(60deg);
    transform-origin: left top;
    box-sizing: border-box;
    border-radius: 8rpx;
  }
}
.model-tab {
      display: flex;
      width: 300px;
      margin: 24px 0;
      &>div {
        flex: 1;
        font-size: 32px;
        font-weight: 400;
        color: rgba($color: #fff, $alpha: 0.8);
        text-align: center;
        vertical-align: top;
        // border-bottom: 2px solid rgba($color: #ffffff, $alpha: 0.3);
        padding-bottom: 10px;
      }
      div.active {
        // border-bottom: 2px solid rgba($color: #ffffff, $alpha: 1);
        color: rgba($color: gray, $alpha: 1);
        font-size: 36px;
        font-weight: bold;
      }
      div.deepactive {
        color: #fff;
        font-size: 36px;
        // border-bottom: 2px solid rgba($color: #4f6bfe, $alpha: 1);
      }
    }
</style>
